        <!-- 列表界面 -->
        <div id="data-list">
            <div class="banner"> <span class="base-blue-01 base-search iconfont icon-chazhaobiaodanliebiao" data-title='角色列表'>角色列表查询</span> </div>
            <div class="base-form">
                <form id="fa-search">
                    <table class="base-table form search">
                        <tr>
                            <td class="td-bg" width="150">角色名</td>
                            <td class="left padding-l">
                                <input class="base-input" name="name" id="name">
                            </td>
                            <td class="td-bg" width="150">创建日前</td>
                            <td class="left padding-l">
                                <input class="base-input base-date" name="createTime" id="createTime" onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})">
                            </td>
                            <td class="center" rowspan="1" width="150">
                                <button id="btn_search" type="button" class="base-btn base-bg-green" data-toggle="modal">查询</button>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="banner"> <span class="base-blue-01 base-search iconfont icon-chazhaobiaodanliebiao">角色列表</span>
                <shiro:hasPermission name="sysRole:saveRole">
                <div id="toolbar" class="toolbar">
                    <button id="btn_add" type="button" class="base-btn base-bg-blue" data-toggle="modal">新增</button>
                </div>
                </shiro:hasPermission>
            </div>
            <div id="list">
                <table class="list-table base-table">
                    <thead>
                        <tr>
                            <th width="60">序号</th>
                            <th>角色名</th>
                            <th width="200">描述</th>
                            <th>创建时间</th>
							<th>修改时间</th>
                            <th width="150">操作</th>
                        </tr>
                    </thead>
                    <tbody id="datalist"> </tbody>
                    <script id="tradecent-template" type="text/x-handlebars-template"> 
					{{#each this}}
                        <tr>
                            <td>
                                <div class='base-wrap'>{{addOne @index}}</div>
                            </td>
                            <td>
                                <div class='base-wrap left' id="roleName" title='{{name}}'>{{name}}</div>
                            </td>
                            <td>
                                <div class='base-wrap left'>{{remark}}</div>
                            </td>
							<td><div class='base-wrap'>{{createTime}}</div></td>
							<td><div class='base-wrap'>{{updateTime}}</div></td>		
                            <td>
								<shiro:hasPermission name="sysRole:updateRole"><span class="oper-handle iconfont icon-bianji base-yellow update" title='修改角色' data-pkid={{roleId}}></span></shiro:hasPermission>
								<shiro:hasPermission name="sysRole:deleteRole"><span class="oper-handle iconfont icon-shanchu base-red delete" title='删除角色' data-pkid={{roleId}}></span></shiro:hasPermission>
								<shiro:hasPermission name="sysRole:detailRole"><span class="oper-handle iconfont icon-xiangqing base-blue detail" title='详情角色' data-pkid={{roleId}}></span></shiro:hasPermission>
								<shiro:hasPermission name="sysRole:powerRole"><span class="oper-handle iconfont icon-shouquanguanli base-green authority" title='权限设置' data-pkid={{roleId}} data-name={{name}}></span></shiro:hasPermission>
							</td>
                        </tr> 
					{{/each}} 
					</script>
                </table>
            </div>
        </div>
        <!-- end列表界面 -->
        <!-- 新增与详情页面 -->
        <div id="data-form" data-title='新增角色'>
            <form id="form">
                <table class="base-table form">
                    <input type='hidden' name='roleId'>
                    <tr>
                        <td class="td-bg" width="150">角色名</td>
                        <td class="left">
                            <input name="name" class="base-input validate require" data-exp="w{2-20}">
                        </td>
                        <td width="150">描述</td>
                        <td>
                            <input name="remark" class="base-input">
                        </td>
                    </tr>
                </table>
            </form>
            <div class="toolbar buttom-btn fixed_pos">
                <button id="btn_back" type="button" class="base-btn base-bg-yellow"> 返回</button>
                <button id="btn_save" type="button" class="base-btn base-bg-blue"> 保存</button>
            </div>
        </div>
        <div id="authority">
            <div>
                <ul id="tree" class="ztree" style="position: relative;bottom: 60px;margin-top:60px;height:250px"></ul>
            </div>
            <form id="menuForm">
                <input type="hidden" name="roleId">
                <input type='hidden' name='menuIds'> </form>
            <div class="toolbar buttom-btn fixed_pos">
                <button id="btn_cancel" type="button" class="base-btn base-bg-yellow">取消</button>
                <button id="menu_save" type="button" class="base-btn base-bg-blue">授权</button>
            </div>
        </div>
        <!--end新增与详情页面-->
        <script type="text/javascript">
        $(function() {
            $.baseEvent({
                ctx: '',
                param: ['name','createTime'],
                isPage: true,
                pageList_url: "/sysRole/pageList",
                form_url: '/sysRole/saveRole',
                data_list: '/route/sys/sys_roleList',
                del_url: '/sysRole/delRole',
                findBy_url: '/sysRole/findRole',
                add_is_dialog: true
            });
            //权限赋值
            $('#datalist').on('click', '.authority', function() {
                var $_this = $(this);
                var roleName = $_this.parents("tr").find("#roleName").text();
                $_this.show();
                $("#authority").data("title",$_this.attr("title"));
                $("input[name='roleId']").val($_this.data("pkid"));
                if (true) {
                    layer.open({
                        type: 1,
                        shade: false,
                        title: "<span class='dialog_title base-zb-info'>" + $_this.attr("title")+"-"+$_this.data("name")+ "</span>",
                        area: ['40%', '50%'],
                        content: $('#authority')
                    });
                }
                $.fn.zTree.init($("#tree"), setting);
            });
            //保存方法
            $('#menu_save').on('click', function() {
                var my = {
                    form: "menuForm",
                    url: "/sysRole/saveMenu",
                    callback: function(res) {
                        if (res.code == '1') {
                            layer.closeAll();
                        }
                        layer.msg(res.message);
                    }
                }
                $._FormRequest(my);
            });
        });
        /**************************ztree************************************/
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            check: {
                enable: true,
                chkStyle: "checkbox", //复选框
                chkboxType: { "Y": "p", "N": "ps" }
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "menuId",
                    pIdKey: "pid",
                    rootPId: ""
                },
                key: {
                    title: "name",
                    name: "name"
                },
            },
            async: { //ztree异步请求数据 
                enable: true,
                dataFilter: ajaxDataFilter, //预处理数据
                type:'get',
                url: "/sysMenu/findAll", //请求action方法 
                autoparam: ["data"]
            },
            callback: {
                //onClick : zTreeOnClick,
                beforeClick: beforeClick,
                onCheck: onCheck,
                onAsyncSuccess: zTreeOnAsyncSuccess
                //异步加载完成调用
            }
        };
        /* 获取返回的数据，进行预操作 */
        function ajaxDataFilter(treeId, parentNode, responseData) {
            responseData = responseData.data;
            return responseData;
        };
        //异步加载完成时运行，此方法将所有的节点打开
        function zTreeOnAsyncSuccess(event, treeId, msg) {
            var treeObj = $.fn.zTree.getZTreeObj("tree");
            treeObj.checkNode(treeId, !treeId.checked, null, true);
            //详情界面
            var my = {
                url: "/sysRole/findAuthority",
                type:'get',
                para: {
                    "roleId": $("input[name='roleId']").val()
                },
                callback: function(res) {
                   var menuIds =  res.data.memus.map(function(v, i) {
                        var node = treeObj.getNodeByParam("menuId", v.menuId);
                        treeObj.checkNode(node, true, true);
                        treeObj.updateNode(node);
                        return v.menuId;
                    })
                    $("input[name='menuIds']").val(menuIds.join(","))
                }
            }
            $._NormalRequest(my);
        }

        function beforeClick(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("tree");
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }

        function onCheck(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("tree");
            var checkeds = zTree.getChangeCheckedNodes().map(function(i, v) {
                return i.menuId;
            });
            $("input[name='menuIds']").val(checkeds);
        }
        /*******************************************************************/
        </script>